<template>
  <div class="all">
    <div class="logo">
      <img style="height: 100px; width: 500px;" src="../assets/logo_home.png">
    </div>
    <!-- <div class= "name">问卷星球</div> -->
<!--    <div class="text1">问卷星球 · 您的问卷好帮手</div>-->
    <el-button @click="login" class="login"  round style="color: #010102;background-color: #caeaff; font-size: 20px">开始使用</el-button>
    <div class="back"></div>

    <div class="banner">
      <div class="item">
        <img :src="dataList[currentIndex]">
      </div>
      <div class="page" v-if="this.dataList.length > 1" @mouseenter="stopAuto" @mouseleave="startAuto">
        <ul>
          <li @click="gotoPage(prevIndex)">&lt;</li>
          <li v-for="(item,index) in dataList"  v-bind:key="item" @click="gotoPage(index)" :class="{'current':currentIndex == index}">⚪</li>
          <li @click="gotoPage(nextIndex)">&gt;</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      dataList:[
        require("../assets/1.png"),
        require("../assets/2.png"),
        require("../assets/3.png")
      ],
      currentIndex: 0,   //默认显示图片
      timer: null,    //定时器
    }
  },
  methods:{
    login:function (){
      this.$router.push('/login')
    },
    gotoPage(index) {
      this.currentIndex = index;
    },
    runInv() {
      this.timer = setInterval(() => {
        this.gotoPage(this.nextIndex)
      }, 2000)
    },
    startAuto(){
      this.runInv()
      console.log('开始移动')
    },
    stopAuto(){
      clearInterval(this.timer)
    }
  },
  computed: {
    //上一张
    prevIndex() {
      if(this.currentIndex == 0) {
        return this.dataList.length - 1;
      }else{
        return this.currentIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if(this.currentIndex == this.dataList.length - 1) {
        return 0;
      }else {
        return this.currentIndex + 1;
      }
    }
  },
  mounted() {
    this.runInv()
  }
}

</script>
<style scoped>
.all{
  margin:0;
  background: url('../assets/home1.jpg') repeat center;
  background-size: cover;
  height: 100%;
}
.login{
  position: absolute;
  top: 4%;
  right: 4%;
  font-family:微软雅黑;
  /*font-weight: ;*/
}
.logo{
  position: absolute;
  top: 1%;
  left: 1%;
}
.text1{
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: '千图厚黑体';
  font-size: 52px;
}
.name{
  text-align: center;
  position: absolute;
  top: 7%;
  left: 14%;
  transform: translate(-50%, -50%);
  color: #303133 ;
  font-size: 40px;
  font-family: "微软雅黑";
}
ul li {
  list-style: none;
  float: left;
  width: 30px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  color: rgba(255,255,255,.8);
  font-size: 14px;
}
.banner {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  /*margin-top: 0px;*/
  top: 35%;
}
.banner img {
  width: 100%;
  display: block;
}
.banner .page {
  /*background: rgba(0,0,0,.5);*/
  position: absolute;
  right: 20px;
  top: 10px;
  width: 100%;
}
.banner .page ul {
  float: right;
}
.current {
  color: #ff6700;
}

</style>